<template>
	<view class="message-news">
		<view class="empty-msg" v-if="lists.length<=0">
			<view class="icon">
				<view class="iconfont icon-konghezi"></view>
			</view>
			<view class="info">空空如也</view>
		</view>
		<block v-else>
			<block v-for="(val,index) in lists" :key="index">
				<view class="message" @click="messageNewsDetail(val)">
					<view class="message-time">{{val.create_time}}</view>
					<view class="message-box">
						<view class="message-title">{{val.title}}</view>
						<view class="message-content">{{val.description}}</view>
					</view>
					<view class="message-more">
						<view class="title">查看详情</view>
						<view class="arrow">
							<view class="iconfont icon-xiayibu"></view>
						</view>
					</view>
				</view>
			</block>
			<uni-load-more :status="status" :content-text="contentText" />
		</block>
		
	</view>
</template>

<script>
	import api from "@/utils/api/news/index.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				status: 'more',
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多'
				},
				page: 1,

				lists: [],
			}
		},
		onLoad() {
			this.page = 1;
			this.loadNews();
		},
		onPullDownRefresh() {
			this.refreshPage();
		},
		onReachBottom() {
			this.loadNews();
		},
		methods: {
			async loadNews() {
				if (this.status != 'more') {
					return;
				}

				let post = {
					page: this.page
				}
				this.page++;
				this.status = 'loading';

				let res = await api.lists(post)
				if (res.status == 1) {
					if (res.data != null && res.data.length > 0) {
						this.lists = this.lists.concat(res.data);
						this.status = 'more';
					} else {
						this.status = 'nomore';
					}
				}
			},
			refreshPage() {
				this.page = 1;
				this.lists = [];
				this.status = 'more';
				this.loadNews();
				uni.stopPullDownRefresh();
			},
			messageNewsDetail(val) {
				uni.navigateTo({
					url: "detail?data=" + JSON.stringify(val)
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	.message-news {
		.message {
			background-color: #352E4D;
			padding: 15px;
			margin-bottom: 10px;

			.message-time {
				color: #9491A5;
				font-size: 12px;
			}

			.message-box {
				.message-title {
					font-size: 18px;
					font-weight: bold;
					line-height: 110%;
				}

				.message-content {
					color: #9491A5;
					padding: 10px;
					line-height: 110%;
				}

				border-bottom:1px solid #473E68;
			}

			.message-more {
				padding-top: 15px;
				flex-direction: row;
				justify-content: space-between;

				view {
					justify-content: center;
				}

				.title {
					font-size: 15px;
					font-weight: bold;
				}

				.arrow {
					.iconfont {
						color: #ccc;
					}
				}
			}
		}
	}
</style>
